<template>
  <div v-cloak>
    <h1 id="test">{{ msg }}</h1>
    <input type="button" value="修改" @click="f1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello world",
    };
  },
  methods: {
    show() {
      console.log("你好");
    },
    f1() {
      this.msg = "Hello Vue";
    },
  },
  boforeCreate() {
    //data与methods还未初始化，不能被调用
    console.log(this.msg);
    this.show();
  },
  created() {
    //data与methods已经未初始化，可以被调用
    console.log(this.msg);
    this.show();
  },

  beforeMount() {
    // console.log(document.getElementById("test").innerText); //Vue开始渲染数据，但数据只是在内存中渲染，并没有真实挂载到HTML页面上
  },
  mounted() {
    console.log(document.getElementById("test").innerText); //数据渲染完成，真实挂载到页面中
  },

  beforeUpdate() {
    //页面数据不会改变
    console.log("打印内存中的数据:" + this.msg);
    console.log(
      "打印页面中的数据:" + document.getElementById("test").innerText
    );
  },
  updated() {
    //页面数据发生了改变
    console.log("打印内存中的数据:" + this.msg);
    console.log(
      "打印页面中的数据:" + document.getElementById("test").innerText
    );
  },
};
</script>

<style></style>
